<script>
    import {ref} from 'vue'

    export default{
        setup(props,context){
            // 定义数据，标记是第几个
            const num = ref(1) 

            // 定义函数，切换Tab
            const  changeTab = (n)=>{
                console.log(n)
                num.value = n; //保存当前是第几个
            }

            return {
                changeTab,
                num
            }
        }
    }
</script>

<template>
    <div>
        <div class="tab">
            <div class="head">
                {{num}}
                <!-- <a href="#" :class=" num == 1 ? 'active' :''" @click="changeTab(1)">
                    香蕉
                </a>
                <a href="#"  :class=" num == 2 ? 'active' :''"@click="changeTab(2)">苹果</a>
                <a href="#"  :class=" num == 3 ? 'active' :''" @click="changeTab(3)">橘子</a> -->

                <a href="#" :class="{active:num == 1}" @click="changeTab(1)">香蕉</a>
                <a href="#"  :class="{active:num == 2}"@click="changeTab(2)">苹果</a>
                <a href="#"  :class="{active:num == 3}" @click="changeTab(3)">橘子</a>
            </div>

            <div class="body">
                <div v-show=" num == 1 ">内容1</div>
                <div v-show=" num == 2 ">内容2</div>
                <div v-show=" num == 3 ">内容3</div>
            </div>
        </div>
    </div>
</template>

<style lang="less">
    .tab{
        /*  */
        width: 300px;
        .head{
            display: flex;
            justify-content: space-between;

           a{
                &.active{
                    color: red;
                    font-size: 20px;
                }
           }
        }
        /*  */
        .body{
            div{
                /* display: none; */
                /* 显示第一个 */
                /* &:first-child{
                    display: block;
                } */
            }
        }
    }
</style>